class Banner {
  constructor(obox, lis) {
    this.obox = obox;
    this.olis = lis;
    this.index = 0;
    this.obox.style.backgroundImage = `url(img/${this.index}.jpg)`;
    this.olis[this.index].style.backgroundColor = "white";
  }
  //1.设置背景图
  setBagImg() {
    this.obox.style.backgroundImage = `url(img/${this.index}.jpg)`;
  }
  //2.设置li 的小红点
  setLiColor() {
    for (let i = 0; i < this.olis.length; i++) {
      if (i == this.index) {
        this.olis[i].style.backgroundColor = "white";
      } else {
        this.olis[i].style.backgroundColor = "#ccc";
      }
    }
  }
  //3.设置点击li 进行切换图片
  clickLi() {
    let that = this;
    for (let i = 0; i < this.olis.length; i++) {
      this.olis[i].onclick = function () {
        that.index = i;
        that.setBagImg();
        that.setLiColor();
      };
    }
  }
  //4.设置右边按钮
  right() {
    this.index++;
    if (this.index == this.olis.length) {
      this.index = 0;
    }
    this.setBagImg();
    this.setLiColor();
  }
  //5.设置左按钮
  left() {
    this.index--;
    if (this.index == -1) {
      this.index = this.olis.length - 1;
    }
    this.setBagImg();
    this.setLiColor();
  }
  //6.设置定时器
  time() {
    let timer = null;
    let connt = 0;
    let that = this;
    //1.鼠标放入停止轮播
    this.obox.onmouseover = function () {
      clearInterval(timer);
    };
    //2.鼠标划出开始轮播
    this.obox.onmouseout = function () {
      clearInterval(timer);
      timer = setInterval(function () {
        that.index = connt;
        connt++;
        if (connt > 4) {
          connt = 0;
        }
        that.setBagImg();
        that.setLiColor();
      }, 2000);
    };
    //3.设置开始就轮播
    timer = setInterval(function () {
      that.index = connt;
      connt++;
      if (connt > 4) {
        connt = 0;
      }
      that.setBagImg();
      that.setLiColor();
    }, 2000);
  }
  //测试
  eventBind() {
    let that = this;
    //右按钮
    let rbtn = document.querySelector("#next");
    rbtn.onclick = function () {
      that.right();
    };
    //左按钮
    let lbtn = document.querySelector("#previous");
    lbtn.onclick = function () {
      that.left();
    };
    this.clickLi();
    this.time();
  }
}
// mf
class mf {
  constructor(smallbox, mask, bigbox, lis) {
    this.smallbox = smallbox;
    this.mask = mask;
    this.bigbox = bigbox;
    this.lis = lis;
    this.index = 0;
  }
  mouseover() {
    let that = this;
    this.smallbox.onmouseover = function () {
      that.mask.style.display = "block";
      that.bigbox.style.display = "block";
    };
  }
  mouseout() {
    let that = this;
    this.smallbox.onmouseout = function () {
      that.mask.style.display = "none";
      that.bigbox.style.display = "none";
    };
  }
  mousemove() {
    let that = this;
    this.smallbox.onmousemove = function (evt) {
      let e = evt || event;
      //遮挡层移动距离
      let x = e.pageX - this.offsetLeft - that.mask.offsetWidth / 2;
      let y = e.pageY - this.offsetTop - that.mask.offsetHeight / 2;
      //设置超出效果
      let MaskLeft = this.offsetWidth - that.mask.offsetWidth;
      let MaskTop = this.offsetHeight - that.mask.offsetHeight;

      if (x < 0) {
        x = 0;
      } else if (x > MaskLeft) {
        x = MaskLeft;
      }
      if (y < 0) {
        y = 0;
      } else if (y > MaskTop) {
        y = MaskTop;
      }
      //遮挡层移动
      that.mask.style.left = x + "px";
      that.mask.style.top = y + "px";

      //大图片
      let max = (that.bigbox.offsetWidth * x) / that.mask.offsetWidth;
      let min = (that.bigbox.offsetHeight * y) / that.mask.offsetHeight;

      that.bigbox.style.backgroundPositionX = -max + "px";
      that.bigbox.style.backgroundPositionY = -min + "px";
    };
  }
  //点击li
  onclikLi() {
    let that = this;
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].onclick = function () {
        that.smallbox.style.backgroundImage = `url(mfimg/${i}.webp)`;
        that.smallbox.style.backgroundSize = "100% 100%";
        that.bigbox.style.backgroundImage = `url(mfimg/${i}.webp)`;
      };
    }
  }
  // 点击左按钮
  next() {
    let that = this;
    this.index++;
    if (this.index == this.lis.length) {
      this.index = 0;
    }
    that.smallbox.style.backgroundImage = `url(mfimg/${this.index}.webp)`;
    that.smallbox.style.backgroundSize = "100% 100%";
    that.bigbox.style.backgroundImage = `url(mfimg/${this.index}.webp)`;
  }
  pre() {
    let that = this;
    this.index--;
    if (this.index == -1) {
      this.index = this.lis.length - 1;
    }
    that.smallbox.style.backgroundImage = `url(mfimg/${this.index}.webp)`;
    that.smallbox.style.backgroundSize = "100% 100%";
    that.bigbox.style.backgroundImage = `url(mfimg/${this.index}.webp)`;
  }

  eventBind() {
    this.mouseover();
    this.mouseout();
    this.mousemove();
    this.onclikLi();
    let that = this;
    let obtnpre = document.querySelector("#previous");
    obtnpre.onclick = function () {
      that.next();
    };
    let obtnext = document.querySelector("#next");
    obtnext.onclick = function () {
      that.pre();
    };
  }
}
